<template>
    <el-row class="container">
        <el-col :span="24" class="header">
            <aside :span="10" :class="['logo-box', collapsed ? 'collapsed' : '']">
                <router-link class="router-link" to="/">
                    <img v-if="collapsed" :src="$getImageUrl(logoUrlWithCollapsed)" alt="logo">
                    <img v-else :src="$getImageUrl(logoUrl)" alt="logo">
                </router-link>
            </aside>
            <el-col :span="4">
                <div class="tools" @click.prevent="collapsed = !collapsed">
                    <font-awesome-icon icon="align-justify"/>
                </div>
            </el-col>
            <section :span="10" class="content-container">
                <el-row class="top-operation">
                    <el-col class="top-operation-item">
                        <el-dropdown @command="operationCommandHandler" class="item-inner item-inner-avatar"
                                     trigger="click">
                            <user-my-avatar :enable-preview="false" size="40"/>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item disabled>{{user.name}}</el-dropdown-item>
                                <el-dropdown-item command="gotoControlPanel">个人中心</el-dropdown-item>
                                <el-dropdown-item command="gotoLoginLogs">登录记录</el-dropdown-item>
                                <el-dropdown-item command="refreshMenus">刷新权限</el-dropdown-item>
                                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </section>
        </el-col>
        <el-col :span="24" class="main">
            <aside :class="['menu', collapsed ? 'collapsed' : '']">
                <el-menu :default-active="$route.meta.activeKey" @open="menuOpen" ref="menu" unique-opened :collapse="collapsed">
                    <commons-menu :value="menus" :collapsed="collapsed" @jumpToView="jumpToView"/>
                </el-menu>
            </aside>
            <section class="content-container" id="container">
                <el-col :span="24" class="content-wrapper">
                    <transition mode="out-in" name="fade">
                        <router-view :key="$route.fullPath"/>
                    </transition>
                </el-col>
            </section>
        </el-col>
    </el-row>
</template>
<script lang="ts">
  // api
  import ControlPanelApi from '@/api/user/controlPanelApi';
  // store
  import AvatarModule from '@/store/modules/avatar';
  // structure
  import Menu from '@/structure/menu';
  import User from '@/structure/user';
  // utils
  import MenuUtil from '@/utils/menu';
  import UserUtil from '@/utils/user';
  import {ElMenu} from 'element-ui/types/menu';
  import {Component, Vue, Watch} from 'vue-property-decorator';

  @Component
  export default class Page extends Vue {
    public menus: Menu[] = [];
    public user: User = new User();
    public openIndex?: any;
    public logoUrl: string = '';
    public logoUrlWithCollapsed: string = '';
    public collapsed: boolean = false;

    public get menuElement(): ElMenu {
      return this.$refs.menu as ElMenu;
    }

    @Watch('$route.path')
    public routerChangeWatcher(newV: string): void {
      if (newV === '/' || newV === '/ControlPanel') {
        this.menuElement.close(this.openIndex);
      }
    }

    public created(): void {
      this.logoUrl = process.env.VUE_APP_INDEX_PAGE_LOGO;
      this.logoUrlWithCollapsed = process.env.VUE_APP_INDEX_PAGE_LOGO_COLLAPSED;
      this.logoUrlWithCollapsed = this.logoUrlWithCollapsed ? this.logoUrlWithCollapsed : this.logoUrl;
      this.user = UserUtil.getUser();
      AvatarModule.change(this.user.avatar);
      this.loadCacheMenus();

      setInterval(() => {
        const accessToken = UserUtil.getAccessToken();
        if (accessToken !== null) {
          return;
        }

        ControlPanelApi.refreshToken().then((res) => {
          UserUtil.set(res);
        });
      }, 60 * 1000);
    }

    public refreshMenus(): void {
      ControlPanelApi.getMenus().then((menus) => {
        MenuUtil.set(menus);
        location.reload();
      });
    }

    public loadCacheMenus(): void {
      try {
        this.menus.push(...MenuUtil.get());
      } catch (e) {
        this.menus.push();
      }
    }

    public logout(): void {
      this.$confirm('确认退出吗?', '提示', {
        type: 'info'
      }).then(() => {
        UserUtil.clean();
        MenuUtil.clean();
        location.reload();
      });
    }

    public gotoControlPanel(): void {
      if (this.$route.name !== 'ControlPanel_PersonalData') {
        this.$router.push({
          name: 'ControlPanel_PersonalData'
        });
      }
    }

    public gotoLoginLogs(): void {
      if (this.$route.name !== 'ControlPanel_LoginLogs') {
        this.$router.push({
          name: 'ControlPanel_LoginLogs'
        });
      }
    }

    public jumpToView(menu: Menu): void {
      if (menu.redirect) {
        window.open(menu.path);
      } else if (this.$route.name !== menu.menuKey) {
        this.$router.push({
          name: menu.menuKey
        });
      }
    }

    public menuOpen(index: any): void {
      this.openIndex = index;
    }

    public operationCommandHandler(command: string): void {
      const func = (this as any)[command];
      if (typeof func === 'function') {
        func();
      }
    }
  }
</script>
<style lang="scss">
    .top-operation {
        height: 100%;
        text-align: center;
        float: right;
        display: flex;

        .top-operation-item {
            flex: 1;
            height: 100%;
            min-width: 90px;

            .item-inner {
                height: calc(100% - 12px);
                border-left: 1px solid #588bdb;
                cursor: pointer;
                font-size: 14px;
                padding: 12px 22px 0;

                i {
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    background: url(/img/top-icon.png) no-repeat;
                    background-size: cover;
                }

                span {
                    display: inline-block;
                    color: #FFFFFF;
                }

                &.item-inner-avatar {
                    padding-top: 10px;
                }
            }
        }
    }
</style>
<style lang="scss" scoped>
    .container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .header {
        height: 65px;
        background: #3b6cbe;
        color: #fff;
        position: absolute;
        top: 0;
        z-index: 2;
        display: flex;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .08);

        .content-container {
            background: #3b6cbe;
        }
    }

    .logo-box {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-bottom: 1px solid #f0f0f0;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .icon {
        color: #fff;
        vertical-align: middle;
        margin-right: 10px;
    }

    .router-link {
        display: inline-block;
        font-size: 14px;
        box-sizing: border-box;
        text-align: center;
        text-decoration: none;
    }

    .router-linkimg {
        height: 100%;
        vertical-align: middle;
    }

    .tools {
        padding: 0 23px;
        width: 14px;
        height: 60px;
        line-height: 60px;
        cursor: pointer;
    }

    .main {
        display: flex;
        position: absolute;
        top: 65px;
        bottom: 0;
        overflow: hidden;
    }

    aside {
        flex: 0 0 220px;
        width: 220px;
        color: #333;
    }

    .collapsed {
        flex: 0 0 64px;
        width: 64px;
    }

    .el-menu {
        border-radius: 0;
        width: 100%;
    }

    .item {
        position: relative;
    }

    .submenu {
        position: absolute;
        top: 0;
        left: 60px;
        z-index: 99999;
        height: auto;
        display: none;
    }

    .menu-collapsed {
        flex: 0 0 60px;
        width: 60px;
    }

    .menu-expanded {
        flex: 0 0 220px;
        width: 220px;
        overflow: hidden;
        background-color: #fff;
        border-right: 1px solid #e3e2e2;
    }

    .content-container {
        background-color: #f0f0f0;
        flex: 1;
        overflow-y: auto;
    }

    .breadcrumb-container .title {
        width: 200px;
        float: left;
        color: #475669;
    }

    .breadcrumb-inner {
        float: right;
    }

    .content-wrapper {
        box-sizing: border-box;
    }

    .el-message-box__headerbtn {
        position: absolute;
        top: 19px;
        right: 20px;
        background: transparent;
        border: none;
        outline: none;
        padding: 0;
        cursor: pointer;
    }
</style>
